// 秒杀配置
import React, { Component } from 'react';
import { Select, Input, Button, Table, Modal, Form } from 'antd';
import axios from "../../../../../../../../util/axios"
import "./index.css"
const { Option } = Select;
const { Search } = Input;

class SecConfig extends Component {
    state = {
        data: [],
        isModalVisible: false,
        columns: [
            {
                title: 'ID',
                dataIndex: 'id',
                align: 'center',
            },
            {
                title: '秒杀名称',
                dataIndex: 'name',
                align: 'center',
            },
            {
                title: '秒杀时段',
                dataIndex: 'mtime',
                align: 'center',
            },
            {
                title: '轮播图',
                dataIndex: 'img',
                render: url => <img src={url} alt="" style={{ width: "50px", height: "50px" }} />,
                className: 'bannerImg',
                align: 'center',
            },
            {
                title: '状态',
                dataIndex: 'zhuangt',
                align: 'center',
            },
            {
                title: '创建时间',
                dataIndex: 'ctime',
                align: 'center',
            },
            {
                title: '操作',
                align: 'center',
                render: (item) => <div>
                    <Button type="text" onClick={() => { this.handleEdit(item) }}>编辑</Button>
                    <Button type="text" onClick={() => { this.handleDel(item.id) }}>删除</Button>
                </div>
            },
        ],
        itemData: {
            id: '',
            name: '',
            mtime: '',
            img: '',
            zhuangt: '',
            ctime: ''
        }
    }
    handleDel = (id) => {//删除
        axios.get('/Secondsdetile', { params: { id: id } }).then(res => {
            this.setState({
                data: res.data.data
            })
            this.getSecConfigData()
        })
    }

    componentDidMount() {
        this.getSecConfigData()
    }
    getSecConfigData() {//获取数据
        axios.get("/Seconds").then(res => {
            this.setState({
                data: res.data.data
            })
        })
    }
    handleChange = (value) => {//筛选
        axios.get('/Secondssearch', { params: { sou: value } }).then(res => {
            this.setState({
                data: res.data.data
            })
        })
    }
    onSearch = (value) => {//模糊搜索
        axios.get('/Secondssearch', { params: { name: value } }).then(res => {
            this.setState({
                data: res.data.data
            })
        })
    }
    handleEdit = (item) => {//编辑
        this.setState({
            isModalVisible: !this.state.isModalVisible,
            itemData: item
        })
    }
    showModal = () => {//添加
        this.setState({
            isModalVisible: !this.state.isModalVisible
        })
    }
    handleOk = () => {
        if (this.state.itemData.id) {
            axios.get('/Secondsban', {
                params: {
                    id: this.state.itemData.id,
                    name: this.state.itemData.name,
                    mtime: this.state.itemData.mtime,
                    img: 'https://img1.baidu.com/it/u=953324899,1906183139&fm=253&fmt=auto&app=120&f=JPEG?w=700&h=500',
                    zhuangt: this.state.itemData.zhuangt,
                    ctime: this.state.itemData.ctime,
                }
            }).then(res => {
                this.state.data = res.data.data
                this.getSecConfigData()
            })
            this.setState({
                ...this.state.itemData,
                isModalVisible: !this.state.isModalVisible,
                itemData: {
                    id: '',
                    name: '',
                    mtime: '',
                    img: '',
                    zhuangt: '',
                    ctime: ''
                }
            })
        } else {
            axios.get('/Secondsban', {
                params: {
                    name: this.state.itemData.name,
                    mtime: this.state.itemData.mtime,
                    img: 'https://img1.baidu.com/it/u=953324899,1906183139&fm=253&fmt=auto&app=120&f=JPEG?w=700&h=500',
                    zhuangt: this.state.itemData.zhuangt,
                    ctime: this.state.itemData.ctime,
                }
            }).then(res => {
                this.state.data = res.data.data
                this.getSecConfigData()
            })
            this.setState({
                ...this.state.itemData,
                isModalVisible: !this.state.isModalVisible,
                itemData: {
                    id: '',
                    name: '',
                    mtime: '',
                    img: '',
                    zhuangt: '',
                    ctime: ''
                }
            })
        }
    }
    handleCancel = () => {//取消按钮
        this.setState({
            ...this.state.itemData,
            isModalVisible: !this.state.isModalVisible,
            itemData: {
                id: '',
                name: '',
                mtime: '',
                img: '',
                zhuangt: '',
                ctime: ''
            }
        })
    }
    NameChange = (e) => {
        this.setState({
            itemData: {
                ...this.state.itemData,
                name: e.target.value
            }
        })
    }
    MtimeChange = (e) => {
        this.setState({
            itemData: {
                ...this.state.itemData,
                mtime: e.target.value
            }
        })
    }
    ZhuangtChange = (e) => {
        this.setState({
            itemData: {
                ...this.state.itemData,
                zhuangt: e.target.value
            }
        })
    }
    CtimeChange = (e) => {
        this.setState({
            itemData: {
                ...this.state.itemData,
                ctime: e.target.value
            }
        })
    }

    render() {
        let { data, isModalVisible, columns, itemData } = this.state
        return (
            <div className='secConfig'>
                <div className="searchTop">
                    <div className="slect">
                        <span>是否显示：</span>
                        <Select defaultValue="请选择" style={{ width: 200 }} onChange={this.handleChange}>
                            <Option value="开启">开启</Option>
                            <Option value="关闭">关闭</Option>
                        </Select>
                    </div>
                    <div className="search">
                        <span>秒杀名称：</span>
                        <Search placeholder="请输入秒杀名称" onSearch={this.onSearch} style={{ width: 260 }} />
                    </div>
                </div>
                <div className="addMs">
                    <Button type="primary" onClick={this.showModal}>添加秒杀配置</Button>
                </div>
                <div className="table">
                    <Table
                        columns={columns}
                        dataSource={data}
                        rowKey='id'
                        bordered
                        scroll={{ y: 540 }}
                    />
                </div>
                <Modal title={itemData.id ? '编辑' : '添加'} visible={isModalVisible} onOk={this.handleOk} onCancel={this.handleCancel} cancelText={'取消'} okText={'确定'}>
                    <li>秒杀名称：<input type="text" value={itemData.name} onChange={this.NameChange} /></li>
                    <li>秒杀时段：<input type="text" value={itemData.mtime} onChange={this.MtimeChange} /></li>
                    <li>状态：<input type="text" value={itemData.zhuangt} onChange={this.ZhuangtChange} /></li>
                    <li>创建时间<input type="text" value={itemData.ctime} onChange={this.CtimeChange} /></li>
                </Modal>
            </div>
        );
    }
}

export default SecConfig;
